<template>
	<div class="card mb-3" style="line-height: 1.2;">
		<div class="card-header d-flex align-items-center">
			规格项：
			<el-input size="mini" style="width:200px;" :value="item.name" @input="vModel('name', $event, index)">
				<el-button slot="append" icon="el-icon-more"></el-button>
			</el-input>
			<el-radio-group size="mini" style="margin-bottom: -10px" class="ml-2" :value="item.type"
				@input="vModel('type', $event, index)">
				<el-radio :label="0">无</el-radio>
				<el-radio :label="1">颜色</el-radio>
				<el-radio :label="2">图片</el-radio>
			</el-radio-group>
			<!-- 上移 -->
			<el-button size="mini" class="ml-auto" icon="el-icon-top" :disabled="index === 0"
				@click="sortCard('moveUp', index)"></el-button>
			<!-- 下移 -->
			<el-button size="mini" icon="el-icon-bottom" :disabled="total === (index + 1)"
				@click="sortCard('moveDown', index)"></el-button>
			<!-- 删除 -->
			<el-button size="mini" type="text" @click="delSkuCard(index)">删除</el-button>
		</div>
		<div class="card-body">
			<!-- 规格属性列表 -->
			<div class="d-flex align-items-center flex-wrap">
				<skuCardChildren v-for="(item2, index2) in list" :key="index2" :type="item.type" :item="item2"
					:cardIndex="index" :valueIndex="index2"
					v-dragging="{ item: item2, list, group: `skuItem${index}` }" />
			</div>
			<!-- 增加规格属性 -->
			<div class="mt-2">
				<el-button type="text" size="mini" icon="el-icon-plus" @click="addSkuValue(index)">
					增加规格值
				</el-button>
			</div>
		</div>
	</div>
</template>

<script>

import { mapState, mapMutations } from "vuex";
import skuCardChildren from "./sku-card-children.vue";
export default {
	name: "sku-card",
	components: {
		skuCardChildren
	},
	props: {
		item: Object,
		index: Number,
		total: Number
	},
	data() {
		return {
			list: this.item.list
		}
	},
	mounted() {
		// 监听拖拽过程
		// this.$dragging.$on('dragged', ({ value }) => {
		// 	console.log(value.item)
		// 	console.log(value.list)
		// });
		// 监听拖拽结束
		this.$dragging.$on('dragend', (e) => {
			// 拖动停止时候触发
			if (e.group === `skuItem${this.index}`) {
				this.sortSkuValue({
					index: this.index,
					value: this.list
				});
			}
		});
	},
	computed: {

	},
	methods: {
		...mapMutations(['delSkuCard', 'vModelKuCard', 'sortSkuCard', 'addSkuValue', 'sortSkuValue']),
		vModel(key, value, index) {
			this.vModelKuCard({ key, value, index });
		},
		// 排序规格卡片
		sortCard(action, index) {
			this.sortSkuCard({ action, index });
		}
	}
}
</script>

<style>

</style>
